<template>
  <div class="asideLife">
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-sub-menu v-for="item in hasChildren" :key="item.id" :index="item.id" >
        <template #title>
          <el-icon><location /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group v-for="subItem in item.subMenu" :key="subItem.name">
          <el-menu-item>{{ subItem.name }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-menu-item v-for="item in noChildren" :key="item.id" :index="item.id" @click="changeRouter(item.path)">
        <el-icon><icon-menu /></el-icon>
        <span>{{ item.name }}{{  }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { Menu as IconMenu, Location } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';

const router = useRouter();
const menu = ref([
  {
    name: "一级菜单1",
    id: "1",
    subMenu: [
      { name: "二级菜单1-1", url: "#menu1-1" },
      { name: "二级菜单1-2", url: "#menu1-2" },
      { name: "二级菜单1-3", url: "#menu1-3" },
    ],
    path: "/",
  },
  {
    name: "一级菜单2",
    id: "2",
    subMenu: [
      { name: "二级菜单2-1", url: "#menu2-1" },
      { name: "二级菜单2-2", url: "#menu2-2" },
    ],
    path: "/",
  },
  {
    name: "echarts",
    id: "3",
    path: "/home/main",
  },
  {
    name: "一级菜单4",
    id: "4",
    path: "/home/mainin",
  },
  {
    name: "一级菜单5",
    id: "5",
    path: "/",
  },
]);

const handleOpen = () => {
  console.log("open");
};
const handleClose = () => {
  console.log("close");
};

const noChildren = computed(() => menu.value.filter((item) => !item.subMenu));
const hasChildren = computed(() => menu.value.filter((item) => item.subMenu));
console.log("noChildren", noChildren.value, hasChildren.value);

const changeRouter = (path: string) => {
  console.log("path", path);
  router.push(path);
}

</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.asideLife {
  width: 100%;
}
</style>